


<template>
    <!-- 公告模块 -->

    <div class="big_contain">
        <el-scrollbar max-height="26rem" class="contain">
            <el-input v-model="search" placeholder="请输入要搜索的公告" style=" width: 14rem;" @blur="noSeacher">
                <template #append>
                    <el-button @click="seacher" class="sercher_btn">
                        <el-icon size="1rem">
                            <Search />
                        </el-icon>
                    </el-button>
                </template>

            </el-input>

            <!-- 身份为老师才显示这个按钮 -->
            <el-button class="publish_btn" type="primary" v-if="users.role=='0'" @click="dialogVisible = true">
                <el-icon>
                    <Sunset />
                </el-icon>&nbsp;发布公告
            </el-button>
            <el-divider style="margin-bottom: 0.5px;" />
            <div class="none_notice" v-if="notices.length == 0">暂无公告</div>
            <div v-else>
                <div v-for="(notice, index) in notices" @click="open_notice(index)"
                    :class="{ color: index === this_show }" :key="notice">
                    <NoticeItem :notice="notice" class="list" />
                </div>
                <p class="no_more">---已经没有更多了---</p>
            </div>
        </el-scrollbar>
        <!-- 右侧显示公告 -->
        <!-- 没有公告显示小喇叭 -->
        <div v-show="check_notices == ''">
            <img src="../../public/img/msg.png">
        </div>
        <div v-show="check_notices != ''" class="left">
            <div class="notice_title">
                <h3>{{ check_notices.title }}</h3>
                <el-icon style="margin-right: 2rem;" class="more_btn" @mouseover="moreShow = true"
                    @mouseleave="moreShow = false">
                    <More />
                    <div v-show="moreShow" class="more" @click="del">
                        <span>删除</span>
                    </div>
                </el-icon>
            </div>
            <!-- 删除的div -->

            <el-divider />
            <div ref="content">

            </div>
        </div>


        <!-- 发布框 -->
        <el-dialog v-model="dialogVisible" title="发布公告">


            <el-form :model="form">
                <el-form-item label="标题：">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item label="内容：">
                    <MyEditor ref="myEditor" @change="change" />
                </el-form-item>
            </el-form>



            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sendNotice">
                        发布
                    </el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script>
import NoticeItem from '../components/NoticeItem.vue'
import notice from '../api/notice.js'
import { ElMessageBox } from 'element-plus'
import { h} from 'vue'
import MyEditor from '../components/MyEditor.vue'
import {mapState} from 'vuex'
export default {
    name: 'PublicNotice',
    components: {
        NoticeItem,
        MyEditor
    },
    data() {
        return {
            //从数据库根据课程号查来的数据
            notices: [],
            //展示的数据
            check_notices: '',
            //搜索框的内容
            search: '',
            //右侧展示的数据
            this_show: '',
            isseach: false,
            moreShow: false,
            dialogVisible: false,
            form: {
                classId: '',
                title: "",
                content: ""
            },

        };
    },

    mounted() {

        notice.getNoticeByClass(this.currentClassId).then((res) => {
            if (res.data != '' && (typeof res.data != 'undefined')) {
                this.notices = res.data
            }

        })
    },

    methods: {
        open_notice(index) {
            
            this.check_notices = this.notices[index];
            this.$refs.content.innerHTML = this.check_notices.content
            this.this_show = index;

        },
        del() {
            notice.deleteNotice(this.check_notices.id).then((res) => {
                ElMessageBox({
                    title: '删除结果',
                    message: h('p', null, [
                        h('span', null, ''),
                        h('i', { style: 'color: teal' }, res.msg),
                    ]),
                })
                 this.notices.splice(this.this_show, 1)
                console.log(this.notices);
                this.this_show = ''
                this.check_notices = ''

            })


        },

        seacher() {
            if (this.search == "") {
                return
            }
            //要做修改把传过来的classId传过来
            notice.getNoticeByTitle(this.search, this.currentClassId).then((res) => {
                console.log(res);
                this.notices = res.data;
            })
        },
        // 输入框为空的时候
        noSeacher() {
            if (this.search == "") {
                notice.getNoticeByClass(this.currentClassId).then((res) => {
                    if (res.data != '') {
                        this.notices = res.data
                    }

                })
            }
        },
        //发布公告
        sendNotice() {
            if(this.form.content=='' || this.form.title=='' ){
                ElMessageBox({
                    title: '提示',
                    message: h('p', null, [
                        h('span', null, ''),
                        h('i', { style: 'color: teal' },'标题或者内容不能为空!' ),
                    ]),
                })
                return
            }

            this.dialogVisible = false
            this.form.classId=this.currentClassId
            notice.sendNotice(this.form).then((res) => {
                ElMessageBox({
                    title: '发布结果',
                    message: h('p', null, [
                        h('span', null, ''),
                        h('i', { style: 'color: teal' }, res.msg),
                    ]),
                })
                 //发送请求再次获取公告
            //获取班级id
            
            notice.getNoticeByClass(this.currentClassId).then((res) => {
                if (res.data != '' && (typeof res.data != 'undefined')) {
                this.notices = res.data
            }
            })
            })
            this.form = {
                classId: '',
                title: "",
                content: ""
            }

        },
        change(content) {
            this.form.content = content
        }


    },
    computed:{
        //从vueX获取数据
        ...mapState(['currentClassId','users'])
    },
};
</script>
<style scoped>
.big_contain {
    display: flex;
    margin: 0 auto;
}

.color {
    background-color: #EDF4FE;
}

.contain {
    height: 32rem;
    width: 32rem;
    background-color: white;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 2px 2px 2px 1px var(--blueColor6);
}

.sercher_btn:active {
    background-color: rgb(238, 237, 237) !important;
}

.publish_btn {
    margin-left: 1rem;
}

.publish_btn:active {
    background-color: #a0cfff;
}

.none_notice {
    text-align: center;
    width: 100%;
    margin-top: 30%;
    font-size: 1.2rem;
    overflow-x: hidden;
}

.no_more {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.big_contain {
    display: flex;
    position: fixed;

}

img {
    margin-top: 10rem;
    margin-left: 13rem
}

.left {
    padding: 2rem;
    width: 36rem;
    height: 32rem;
    margin-left: 3rem;
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 1px var(--blueColor6);
    position: relative;
}

.notice_title {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
}



.more {
    width: 4rem;
    height: 2rem;
    border: 1px solid white;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, .5);
    position: absolute;
    line-height: 2rem;
    text-align: center;
    color: #333;
    font-size: 0.6rem;
    margin-top: 3rem;
    margin-left: -3rem;
}
</style>